<template>
  <div>
    <div class="box">
      <draggable v-model="items" :options="dragOptions" @start="dragStarted" @end="dragEnded" chosenClass="chosenClass" animation="200"  filter=".forbid" :move="onMove">
        <transition-group class="draggable" tag="div">
          <div v-for="(item, index) in items" :key="index" :class="item.id == 1? 'item forbid' : 'item'" :style="index == 0 ? '' :'cursor:pointer'">
            {{ item.name }}
          </div>
      </transition-group>
      </draggable>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: {
    draggable,
  },
  data() {
    return {
      items: [
        { id: 1, name: '首页' },
        { id: 2, name: '图标2' },
        { id: 3, name: '图标3' },
        { id: 4, name: '图标4' },
        { id: 5, name: '图标5' },
      ],
      dragOptions: {},
    }
  },
  methods: {
    dragStarted(event) {
      // 拖拽开始时的操作
      console.log(event)
    },
    dragEnded(event) {
      // 拖拽结束时的操作
      console.log(this.items)
    },
    onMove(e){ 
      console.log(e.relatedContext.element.id);
      if(e.relatedContext.element.id==1) return false;
        return true;
      }  
  },
}
</script>

<style scoped lang="scss">
.box {
  width: 50%;
  height: 200px;
  border: 1px solid black;
  margin: auto;

}
.draggable {
  display: flex;
  justify-content: space-evenly;
  
  .item {
    margin-top: 10px;
    width: 50px;
    height: 50px;
    padding: 5px;
    background: #ccc;
    line-height: 50px;
    text-align: center;
  }
}
.draggable-enter-active,
.draggable-leave-active {
  transition: all 300ms ease;
}

.draggable-enter,
.draggable-leave-to {
  opacity: 0;
  transform: translateY(20px);
}
.chosenClass {
  background: red;
}
</style>
